<template>
    <div>
        <!-- 网页端样式  -->
        <div v-if="!isMobile" class="cart-web">
            <!-- 导航栏
              左边logo 右边搜索
              内容 单栏购物车  -->
            <div class="cart-contain">
                <div class="cart-table-container">
                    <div class="cart-filter-bar">
                        <span class="switch-cart">购物车（全部{{ cartTotalCount }}）</span>
                        <!-- <div class="cart-sum" style="display: none">
                          <span class="pay-text">已选商品</span>
                          <span class="total-symbol">{{ cartTotalPrice }}</span>
                          <div class="pay-btn inactive-btn">结算</div>
                        </div> -->
                    </div>
                    <div class="cart-list-content">
                        <el-table
                                ref="cartTable"
                                :data="cartList"
                                v-loading="loading"
                                size="mini"
                                style="width: 95%; margin: 0 auto"
                                v-on:selection-change="handleSelectionChange"
                        >
                            <el-table-column
                                    header-align="center"
                                    align="center"
                                    type="selection"
                                    width="50"
                            ></el-table-column>
                            <el-table-column label="商品图片" width="180" header-align="center" align="center">
                                <template slot-scope="scope">
                                    <el-image
                                            :src="scope.row.img"
                                            style="width: 192px; height: 108px"
                                    >
                                        <div slot="placeholder" class="image-slot">
                                            Loading<span class="dot">...</span>
                                        </div>
                                        <div slot="error" class="image-slot">
                                            <el-image
                                                    style="width: 192px; height: 108px"
                                                    src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
                                            ></el-image>
                                        </div>
                                    </el-image>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    header-align="center"
                                    align="center"
                                    label="商品名称"
                                    prop="gname"
                            ></el-table-column>
                            <el-table-column header-align="center" align="center" label="单价" prop="price"></el-table-column>
                            <el-table-column header-align="center" align="center" label="数量" width="220">
                                <template slot-scope="scope">
                                     库存剩余:{{scope.row.residue}}
                                    <el-input-number
                                            setp="1"
                                            :min="1"
                                            :max="scope.row.residue"
                                            v-model="scope.row.totalNum"
                                            plain
                                            v-on:change="calTotalPrice()"
                                    ></el-input-number>
                                </template>
                            </el-table-column>
                            <el-table-column label="金额" header-align="center" align="center"
                                             prop="totalfee">
                                <template slot-scope="scope"  prop="totalfee">
                                    <span>{{scope.row.totalNum * scope.row.price }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column header-align="center" align="center" label="操作" fixed="right" >
                                <template slot-scope="scope">
                                    <el-button
                                            size="medium"
                                            type="danger"
                                            v-on:click="delGood(scope.row.id)"
                                    >删除
                                    </el-button
                                    >
                                </template>
                            </el-table-column>
                        </el-table>

                        <div class="block">
                            <el-pagination
                                    style="float: right"
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="currentPage"
                                    :page-sizes="pageSizes"
                                    :page-size="pageSize"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="total">
                            </el-pagination>
                        </div>

                    </div>
                    <div class="cart-filter-bar-bottom">
                        <div class="bar-bottom-left">
              <span class="all-check">
                <div>
                  <el-checkbox
                          class="all-check-checkbox"
                          v-model="isAllChecked"
                          v-on:change="checkAll"
                  >全选</el-checkbox
                  >
                </div>
              </span>
                            <span class="all-del" v-show="isAllChecked">
                <el-button type="danger" size="small" v-on:click="delAll"
                >删除</el-button
                >
              </span>
                        </div>
                        <div class="cart-sum">
                            <span class="pay-text">已选商品</span>
                            <span class="total-text">合计：</span>
                            <span class="total-symbol">{{ cartTotalPrice }}</span>
                            <div v-if="selectionData.length > 0" class="pay-btn-active" @click="buyCourse">
                                结算
                            </div>
                            <div v-else class="pay-btn-inactive" >结算</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <el-dialog title="收银台" :visible.sync="dialogFormVisible" width="600px" @close="flush">
            <div data-v-1ee14d65="" style="margin: auto">
                <div style="float: right;margin-right: 40px;color: red;font-size: 20px;font-family: 幼圆;margin-top: -37px;">
                    总价:￥{{cartTotalPrice}}
                </div>
                <div data-v-1ee14d65="" class="remark" style="margin-top: 23px;padding-left: 75px">
                    <div style="margin-bottom: 20px;margin-left: -73px;border-radius: 10px;width: 535px;border: 1px solid darkgray;box-shadow: 10px 10px 5px rgba(0,0,0,0.9)" v-for="item in orderInfo">
                        <div >
                            <div style="float: left;margin-top: 10px;margin-left: 10px" class="block"><el-avatar shape="square" :size="35" :src="item[0].bicon"></el-avatar></div>
                        </div>
                        <div style="font-size: 17px;font-family: 幼圆;margin-top: 17px;margin-left: 61px;">
                            {{item[0].sname}}
                        </div>
                        <div style="margin-top: 20px" v-for="items in item">
                            <img style="margin-left: 52px;margin-top: 19px;" :src="items.img" width="96" height="54">
                            <div style="float: right;margin-top: 20px;">
                                <div style="margin-right: 252px;font-family: 幼圆;font-size: 17px">
                                    {{items.gname}}
                                </div>
                            </div>
                            <div style="margin-left: 418px;margin-top: -40px;margin-bottom: 20px;border: 2px solid grey;border-radius: 10px;width:42px;height: 26px;padding-top: 5px;padding-left: 4px;">
                                ×{{items.num}}
                            </div>
                            <el-divider style="width: 400px"></el-divider>
                        </div>
                    </div>
                    <el-form ref="form" :model="payForm" style="margin-left: -69px">
                        <label data-v-1ee14d65="" style="font-family: 幼圆;font-size: 15px">请选择收获地址:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                        <el-select size="small" v-model="payForm.addrid" placeholder="请选择收货地址"
                                    @change="aaaa">
                            <el-option
                                    v-for="item in addrForm"
                                    :label="item.addr"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                        <el-link type="primary"
                                 style="font-family: 幼圆;font-size: 15px;margin-left: 20px"
                                 href="http://localhost:8080/geRenCenter">点我添加新的地址
                        </el-link>
                    </el-form>
                </div>
                <el-button type="primary" style="margin-left: 210px;margin-top: 25px;" @click="choosePay">立即购买</el-button>


            </div>
            <!--                                </div>-->
        </el-dialog>


        <!--支付弹出层-->
        <el-dialog
                title="请选择支付类型"
                :visible.sync="payDialogVisible"
                width="50"
                @close="aboutpay">
            <!--支付宝和微信选择-->
            <div style="height: 520px;margin-top: 20px;margin-left: 100px">
                <el-button @click="alipay">
                    <img style="padding: 0" width="200" height="60"
                         src="">
                </el-button>
                <el-button @click="weixinpay">
                    <img width="200" height="60"
                         src="">
                </el-button>
                <span id="weixin"
                      style="display: inline-block;margin-left: 60px;border: 2px solid lightgrey">
                                    </span><br>
                <div style="margin-top: 25px;font-family: 幼圆;font-size: 15px">
                    请扫描下方二维码支付:<br>
                    (请在30分钟内完成支付,超时则订单无效)
                </div>
                <div style="border: 2px solid lightslategrey;width: 490px;height: 349px">
                    <vue-qr v-if="this.payStatus===0"
                            style="padding-left:10px;padding-left: 86px;width: 300px;margin-top: 27px; "
                            :text="payResult.codeUrl"
                            :margin="0"
                            colorDark="green"
                            :logoSrc="require('/src/assets/img/wx.jpg')"
                            colorLight="#fff"
                            :size="200">
                    </vue-qr>
                    <vue-qr
                            v-if="this.payStatus===1"
                            style="padding-left:10px;padding-left: 86px;width: 300px;margin-top: 27px; "
                            :text="payResultAli.codeUrl"
                            :margin="0"
                            colorDark="blue"
                            :logoSrc="require('/src/assets/img/ali.png')"
                            colorLight="#fff"
                            :size="200">
                    </vue-qr>
                </div>
            </div>
        </el-dialog>

        <el-dialog
                title="订单提示"
                :visible.sync="orderDialogVisible"
                width="30%">
                                <span style="font-family: 幼圆;font-size: 15px">
                                    当前支付尚未完成,若当前页面意外关闭,该订单将自动保存到<br>
                                    <span style="color:red;">"个人中心->我的订单"</span>中,可在我的订单中继续完成支付<br>
                                    确认要关闭当前订单吗?
                                </span>
            <span slot="footer" class="dialog-footer">
                                    <el-button @click="quxiaoOrder">取 消</el-button>
                                    <el-button type="primary" @click="closeOrder">确 定</el-button>
                                </span>
        </el-dialog>


    </div>
</template>

<script>
    import vueQr from 'vue-qr'
    export default {
        name: "MyCart",

        data() {
            return {
                orderDialogVisible: false,
                payStatus: null,
                jiesuan:{},
                //库存余量
                stockNum: 0,
                //当前用户所有的收获地址数据
                addrForm: [],
                payForm:{
                },
                dialogFormVisible: false,
                //总条数
                total: 0,
                //接受一个整型数组，数组元素为显示的选择每页显示的个数的选项
                pageSizes: [4, 6, 8, 10],
                //默认显示几条
                pageSize: 4,
                //当前显示的页面变量
                currentPage: 1,
                //选中数据
                selectionData: [],
                // 购物车列表
                cartList: [],
                // 加载
                loading: false,
                // 购物车总数
                cartTotalCount: 0,
                // 购物车总价格
                cartTotalPrice: 0.0,
                // 是否是移动端
                isMobile: false,
                // 是否全选
                isAllChecked: false,
                //订单编号
                code:"",
                //订单信息
                orderInfo:{},
                //支付弹出层
                payDialogVisible: false,
                //得到响应的结果
                payResult: {
                    codeUrl: "", //二维码的地址
                    code: "", //订单号
                    logoSrc: "/src/assets/img/美女.jpg" //微信二维码中间小logo
                },
                //得到响应的结果
                payResultAli: {
                    codeUrl: "", //二维码的地址
                    code: "", //订单号
                    logoSrc: "/src/assets/img/ali.png" //微信二维码中间小logo
                },
            }
        },
        created() {
            let _this = this;
            // 初始化数据
            _this.initData();
            //获取当前用户所有的地址
            this.getAddr();
        },
        mounted() {

            let _this = this;
            // 自适应
            _this.resizeLayout();
            window.onresize = function () {
                _this.resizeLayout();
            };
        },
        components: {
            vueQr
        },
        methods: {
            //选择器强制刷新
            aaaa(){
                this.$forceUpdate()
            },
            flush(){
              this.getList()
            },
            //取消关闭
            quxiaoOrder() {
                this.orderDialogVisible = false;
                this.payDialogVisible = true;
            },
            //关闭支付页面
            closeOrder() {
                //消除定时器
                clearInterval(this.timer);
                this.timer = null;
                this.orderDialogVisible = false;
                this.payDialogVisible = false;
                this.dialogFormVisible = false;
            },
            //支付状态
            queryPayStatus() {
                //继续支付
                var that = this;
                this.$http.get("business/order/paystatus/" + this.payForm.orderno).then(r => {
                    if (r.data.code === 2000) {
                        this.payResult.codeUrl = "",
                        this.payResultAli.codeUrl = "",
                        clearInterval(this.timer);
                        //如果支付成功，清除定时器
                        that.$message.success(r.data.msg);
                        //消除定时器
                        clearInterval(this.timer);
                        that.timer = null;
                        that.payDialogVisible = false;
                        that.dialogFormVisible = false;
                        //刷新界面
                        that.getList();
                    }
                })
            },
          queryPayStatusali() {
            //继续支付
            var that = this;
            this.$http.get("/order/order/paystatus/" + this.payForm.orderno).then(r => {
              if (r.data.code === 2000) {
                this.payResult.codeUrl = "",
                    this.payResultAli.codeUrl = "",
                    clearInterval(this.timer);
                //如果支付成功，清除定时器
                that.$message.success(r.data.msg);
                //消除定时器
                clearInterval(this.timer);
                that.timer = null;
                that.payDialogVisible = false;
                that.dialogFormVisible = false;
                //刷新界面
                that.getList();
              }
            })
          },
            //生成支付二维码
            weixinpay() {
                clearInterval(this.timer);
                this.timer = null;
                this.payStatus = 0;
                this.payForm.code = this.code;
                this.payForm.totalmoney = this.cartTotalPrice
                if (this.payResult.codeUrl !== '') {
                    //定时器
                    this.timer = setInterval(() => {
                        this.queryPayStatus(this.payResult.code);
                    }, 6000)
                    return
                }
                this.payForm.paysort = this.payStatus
                console.log(this.payForm)
                this.$http.post("business/order/buyWei", this.payForm).then(res => {
                    if (res.data.code === 2000) {
                        this.payResult.codeUrl = res.data.data.codeUrl;
                        this.payResult.code =this.code;
                        this.payResult.total_fee = this.cartTotalPrice;
                        //定时器
                        this.timer = setInterval(() => {
                            this.queryPayStatus(this.payResult.code);
                        }, 6000)
                    }else if (res.data.code===5001){
                        this.$message.error(res.data.msg)
                    } else {
                        this.$message.error("当前库存不充足,请更改数量后再尝试")
                        this.$http.post("order/cart/changeCart",this.selectionData).then(res=>{

                        })
                        this.initData();
                    }
                })
            },
            alipay() {
                clearInterval(this.timer);
                this.timer = null;
                this.payStatus = 1;
                this.payForm.code = this.code;
                this.payForm.totalmoney = this.cartTotalPrice
                if (this.payResultAli.codeUrl !== '') {
                    this.timer = setInterval(() => {
                        this.queryPayStatus(this.payResultAli.code);
                    }, 6000)
                    return;
                }
                this.payForm.paysort = this.payStatus
              console.log(this.payForm)
                this.$http.post("/order/order/buyCart", this.payForm).then(res => {
                    if (res.data.code === 2000) {
                        this.payResultAli.codeUrl = res.data.data.data.codeUrl;
                        this.timer = setInterval(() => {
                            this.queryPayStatusali(this.payResultAli.code);
                        }, 2000)
                    }else if (res.data.code===5001){
                        this.$message.error(res.data.msg)
                    } else {
                        this.$message.error("当前库存不充足,请更改数量后再尝试")
                        this.$http.post("order/order/changeCart",this.selectionData).then(res=>{
                        })
                        this.getList()
                    }
                })
            },
            //关闭支付弹出层
            aboutpay() {
                if (this.payResult.code==="" && this.payResultAli.code==="" || this.payResult.code===null && this.payResultAli.code===null){

                }else {
                    this.orderDialogVisible = true;
                }
            },
            choosePay() {
                if (this.payForm.addrid != null && this.payForm.addrid!=="") {
                    this.payDialogVisible = true;
                } else {
                    this.$message.warning("请选择收货地址后再购买")
                }

            },
            //获取当前用户所有收获地址
            getAddr() {
                this.$http.get('/commodity/goods/getAllAddr').then(res => {
                    if (res.data.code === 2000) {
                        this.addrForm = res.data.data.data;
                        console.log(this.addrForm)
                    }
                })
            },
            //购买事件
            buyCourse() {
                var item = sessionStorage.getItem("token");
                // alert(this.playStatus)
                if (item == null) {
                    this.$msgBox({
                        content: '请登录后再购买',
                        isShowCancelBtn: false
                    }).then(() => {
                        this.$router.push({
                            path: '/qianLogin'
                        }); //登录
                    })
                    return
                }
                console.log(this.selectionData)
              this.$http.post("order/cart/verify",this.selectionData).then(res=>{
                if (res.data.code===2000){
                  this.$message.success(res.data.msg)


                //生成订单
                this.$http.post("order/cart/settlement",this.selectionData).then(res=>{
                    if (res.data.code===2000){
                        this.$message.success(res.data.msg)
                        this.payForm.orderno = res.data.data.data;
                    }
                })
                setTimeout(() => {
                    //根据订单号查询订单信息
                    this.$http.get("order/order/getOderInfo?code="+this.code).then(res=>{
                        if (res.data.code===2000){
                            console.log(res.data.data)
                            this.orderInfo = res.data.data
                            var info = this.orderInfo[0];
                            this.payForm.addrid = info[0].addrid

                        }
                    })
                }, 500);
                  var totalMoney = 0;
                  for (var i=0;i<this.selectionData.length;i++){
                    totalMoney = totalMoney+this.selectionData[i].num*this.selectionData[i].price;
                  }
                  this.jiesuan.totalmoney = totalMoney;
                  this.dialogFormVisible = true;
                }else if (res.data.code===5000){
                  this.$message.success(res.data.msg)
                  this.initData();
                }
              })


            },
            //每页显示的条数大小改变时触发的方法
            handleSizeChange(val) {
                this.pageSize = val;
                this.getList()
            },
            //页码改变时触发的方法
            handleCurrentChange(val) {
                this.currentPage = val;
                this.getList()
            },
            // 选择当前商品
            checkCurrent(item) {
                let _this = this;
                // 如果商品是被勾选的
                if (item.checked) {
                    // 从被选择数组中清除
                    _this.selectionData.forEach((sItem, sIndex) => {
                        if (sItem.id === item.id) {
                            _this.selectionData.splice(sIndex, 1);
                        }
                    });
                    // 勾选状态变为false
                    _this.cartList.forEach((cItem, cIndex) => {
                        if (cItem.id === item.id) {
                            _this.cartList[cIndex]["checked"] = false;
                        }
                    });
                } else {
                    // 如果商品是未被勾选的
                    // 勾选状态变为true
                    _this.cartList.forEach((cItem, cIndex) => {
                        if (cItem.id === item.id) {
                            _this.cartList[cIndex]["checked"] = true;
                        }
                    });
                    // 添加到被选择数组中
                    _this.selectionData.push(item);
                }
                // 如果被选择数组没有数据 则全选为false
                if (_this.selectionData.length <= 0) {
                    _this.isAllChecked = false;
                }
                // 如果被选择数组数组长度和购物车数组长度相同 则全选为true
                if (_this.selectionData.length === _this.cartList.length) {
                    _this.isAllChecked = true;
                }
                // 计算商品总价和总数量
                _this.calTotalPrice();
            },
            //响应式布局
            resizeLayout() {
                // 浏览器宽
                let width =
                    document.documentElement.offsetWidth || document.body.offsetWidth;
                let height =
                    document.documentElement.clientHeight || document.body.clientHeight;
                let _this = this;
                if (width > 700) {
                    _this.isMobile = false;
                } else {
                    _this.isMobile = true;
                }
            },

            // 初始化数据
            initData() {
                let _this = this;
                _this.getList();
            },

            // 获取购物车列表
            getList() {
                this.$http.get("/order/cart/findCart?currentPage="+this.currentPage+"&pageSize="+this.pageSize).then(res=>{
                    console.log(res)
                    if (res.data.code===2000){
                        this.total = res.data.data.data[0].total
                        this.cartList = res.data.data.data
                    }
                })
            },

            // 计算总价和总数量
            calTotalPrice() {
                let _this = this;
                _this.cartTotalPrice = 0;
                _this.cartTotalCount = 0;
                // 如果有选中项
                if (_this.selectionData.length > 0) {
                    _this.selectionData.forEach((item) => {
                        _this.cartTotalPrice += item.totalNum * item.price;
                        _this.cartTotalCount += item.totalNum;
                    });
                }
            },
            // 控制选择商品
            handleSelectionChange(data) {
                let _this = this;
                _this.selectionData = data;
                // 这里嵌套循环需要优化
                _this.cartList.forEach((good) => {
                    if (_this.selectionData.length > 0) {
                        // 如果在被选择数组中存在 则checked为true
                        _this.selectionData.forEach((selectedItem) => {
                            if (selectedItem.id === good.id) {
                                good.checked = true;
                            } else {
                                good.checked = false;
                            }
                        });
                    } else {
                        // 如果在被选择数组中没有数据则checked全设置为false
                        good.checked = false;
                    }
                });
                let cartTotalChecked = _this.selectionData.length;
                if (_this.cartList.length === cartTotalChecked) {
                    _this.isAllChecked = true;
                } else {
                    _this.isAllChecked = false;
                }
                _this.calTotalPrice();
            },
            // 	全部删除
            delAll() {
                let _this = this;
                _this
                    .$confirm("确定要删除全部商品吗?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    })
                    .then(function () {
                        console.log(_this.selectionData)
                        var ids = [];
                        for (var i = 0;i<_this.selectionData.length;i++){
                            ids[i] = _this.selectionData[i].id
                        }
                        console.log(ids)
                        _this.$http.post("order/cart/deleteByIds",ids).then(res=>{
                            if (res.data.code===2000){
                                _this.$message.success(res.data.msg);
                                _this.initData();
                            }
                        })

                       // 这里只是前端删除
                       //  _this.cartList = [];
                       //  _this.isAllChecked = false;
                       //  //删除后需要重新获取数据刷新页面

                    })
                    .catch((e) => {
                        console.log(e);
                    });
            },
            // 单个删除
            delGood(id) {
                let _this = this;
                if (!id) {
                    _this.$message.error("商品有误，请刷新后重试");
                    return;
                }
                _this
                    .$confirm("确定要删除此商品吗?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    })
                    .then(function () {
                        let goodIndex = 0;
                        _this.cartList.forEach((item, index) => {
                            if (item.id === id) {
                                goodIndex = index;
                            }
                        });
                        _this.cartList.splice(goodIndex, 1);
                        console.log(id)
                        _this.$http.get("/order/cart/deleteCart?id="+id).then(res=>{
                            if (res.data.code===2000){
                                _this.$message.success(res.data.msg)
                                _this.initData();
                            }
                        })

                    })
                    .catch((e) => {
                        console.log(e);
                    });
            },
            // 全选
            checkAll() {
                let _this = this;
                // 如果全选
                if (_this.isAllChecked) {
                    _this.getList();
                    // 将购物车列表复制给被选择数组
                    _this.selectionData = JSON.parse(JSON.stringify(_this.cartList));
                    _this.cartList.forEach((cItem, cIndex) => {
                        _this.cartList[cIndex]["checked"] = true;
                    });
                    if (_this.$refs.cartTable) {
                        _this.$refs.cartTable.clearSelection();
                        // el table全部选中
                        _this.$refs.cartTable.toggleAllSelection();
                    }
                } else {
                    _this.cartList.forEach((cItem, cIndex) => {
                        _this.cartList[cIndex]["checked"] = false;
                    });
                    _this.selectionData = [];
                    if (_this.$refs.cartTable) {
                        // el table清空选中
                        _this.$refs.cartTable.clearSelection();
                    }
                }
                _this.calTotalPrice();
            },
        },
    };
</script>

<style lang="scss" rel="stylesheet/scss">

    .view_info {
        float: right;
        width: 570px;
        height: 295px;
        position: relative;

        p {
            font-size: 18px;
            color: #fff;
            word-break: break-all;
        }

        .foot_box {
            position: absolute;
            bottom: 0px;
            width: 100%;
            height: 36px;
        }

        .buy_btn {
            margin-right: 30px;
            width: 136px;
            height: 36px;
            color: #fff;
            background: #D51423;
            border: none;
            border-radius: 6px;
            line-height: 36px;
            text-align: center;
            font-size: 14px;
            // position: absolute;
            // bottom: 0px;
            &:hover {
                text-decoration: none;
                color: #fff;
                cursor: pointer;
            }
        }
    }
    /* 购物车web端 */
    .cart-web {
        width: 100%;
        height: auto;
        background: #e8e2e0;
    }

    /* 购物车移动端 */
    .cart-phone {
        width: 100%;
        height: calc(100vh - 135px);
        background: #e8e2e0;
    }

    /* 购物车头部 */
    .cart-header {
        width: 100%;
        height: 58px;
        padding: 11px 0;
        background-color: #fff;
        display: flex;
        justify-content: center;
    }

    .cart-header .cart-header-contain {
        width: 80%;
        display: flex;
        align-items: center;
    }

    /* 购物车标题 */
    .cart-header .cart-header-contain .cart-title {
        font-size: 18px;
        font-weight: 500;
    }

    .cart-contain {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 24px;
        background-color: #f5f5f5;
    }

    .cart-table-container {
        width: 100%;
        border-radius: 25px;
        padding: 10px 30px;
        background: #fff;
        min-height: calc(100vh - 130px);
        position: relative;
        margin-bottom: 20px;
        margin-top: -25px;
    }

    .cart-filter-bar {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .cart-filter-bar .switch-cart {
        overflow: hidden;
        color: #000;
        font-size: 18px;
        font-weight: 600;
        height: 72px;
        line-height: 72px;
    }

    .cart-filter-bar .cart-sum {
        font-size: 14px;
        display: flex;
        align-items: center;
    }

    .cart-sum .total-symbol {
        font-weight: 400;
        margin-right: 12px;
        font-size: 24px;
        color: #ff5000;
    }

    /* 激活状态的支付按钮 */
    .cart-sum .pay-btn-active {
        width: 74px;
        height: 42px;
        line-height: 42px;
        color: #fff;
        background: #ff5000;
        border-radius: 21px;
        text-align: center;
        cursor: pointer;
        text-decoration: none;
        font-size: 16px;
    }

    /* 未激活状态的支付按钮 */
    .cart-sum .pay-btn-inactive {
        width: 74px;
        height: 42px;
        line-height: 42px;
        color: #fff;
        background: #a3a3a3;
        border-radius: 21px;
        text-align: center;
        cursor: not-allowed;
        text-decoration: none;
        font-size: 16px;
    }

    .inactive-btn {
        background: #aaa !important;
        color: #fff;
        cursor: not-allowed !important;
    }

    .cart-list-content {
        max-height: 100vh;
        padding-bottom: 72px;
        overflow-y: auto;
    }

    /* 购物车底部栏 */
    .cart-filter-bar-bottom {
        width: 95%;
        display: flex;
        justify-content: space-between;
        position: absolute;
        bottom: 0;
        background: #fff;
        z-index: 999;
    }

    .cart-filter-bar-bottom .bar-bottom-left {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* 全选 */
    .cart-filter-bar-bottom .all-check {
        overflow: hidden;
        color: #000;
        height: 72px;
        line-height: 72px;
        font-size: 12px;
    }

    .cart-filter-bar-bottom .all-check .all-check-checkbox {
        margin-right: 10px;
    }

    /* 全部删除 */
    .cart-filter-bar-bottom .all-del {
        margin-left: 20px;
    }

    .cart-filter-bar-bottom .cart-sum {
        font-size: 14px;
        display: flex;
        align-items: center;
    }

    .cart-sum .pay-text {
        margin: 0 12px;
    }

    .cart-sum .total-text {
        margin: 0 0 0 12px;
    }

    .cart-box {
        padding: 10px 0;
    }

    .cart-list-item {
        position: relative;
        border-radius: 8px;
        overflow: hidden;
        border: 0;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin: 20px;
        background-color: #fff;
        padding: 8px 0;
    }

    .cart-list-item .cart-item-info {
        display: flex;
        align-items: center;
        padding: 0 0 0 15px;
    }

    .cart-list-item .cart-item-left {
        width: 100px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .cart-list-item .left-check {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 8%;
    }

    /* 单个选择按钮 */
    .cart-list-item .left-check .checkbox {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: #fff;
        border: 1px solid #b9b9b9;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 单个选择按钮选中 */
    .cart-list-item .left-check .checkbox .selected-check {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: red;
    }

    .cart-item-right {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding: 10px;
    }

    .cart-item-opera {
        display: flex;
        align-items: center;
    }

    /* 删除按钮 */
    .del-btn {
        position: absolute;
        right: 10px;
        bottom: 10px;
        font-size: 17px;
        color: red;
    }

    .cart-item-right .cart-item-info-content {
        margin-right: 20px;
        width: 70px;
    }

    .cart-item-right .goods-name {
        width: 100%;
        font-size: 15px;
        color: #333333;
        margin-top: 3px;
        text-align: left;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .cart-item-right .numbers {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 10px;
    }

    .cart-item-right .numbers .price {
        font-size: 14px;
        line-height: 25px;
        color: #ff0000;
    }

    .bottom-all {
        height: 50px;
        width: 100%;
        padding: 0 2%;
        align-items: center;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        position: fixed;
        bottom: 0;
        left: 0;
        background-color: #fdfdfd;
        z-index: 11;
        border-top: 1px solid #f8f8f8;
    }

    .bottom-all .left {
        float: left;
        width: 28vw;
        font-size: 14px;
        position: relative;
    }

    .bottom-all .left .text {
        position: absolute;
        left: 35px;
        top: 50%;
        transform: translateY(-52%);
        color: #333333;
    }

    .bottom-all .del-text {
        color: red;
        position: absolute;
        left: 80px;
        top: 47%;
        transform: translateY(-52%);
    }

    .bottom-all .left-check {
        padding-left: 8px;
        flex-shrink: 0;
        height: 50px;
        margin-right: 8px;
        align-items: center;
        position: relative;
        display: flex;
    }

    .bottom-all .rights {
        width: 40vw;
        line-height: 50px;
        font-size: 16px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .bottom-all .settlement-inactive {
        padding: 0 4px;
        border-radius: 16px;
        width: 18vw;
        height: 35px;
        line-height: 35px;
        color: #ffffff;
        font-size: 17px;
        text-align: center;
        margin-right: 20px;
        cursor: not-allowed;
        background-color: #a3a3a3;
    }

    .bottom-all .settlement-active {
        padding: 0 4px;
        border-radius: 16px;
        width: 18vw;
        height: 35px;
        line-height: 35px;
        color: #ffffff;
        font-size: 17px;
        text-align: center;
        margin-right: 20px;
        background-color: #ff5000;
    }

    /* 购物车为空的样式 */
    .cart-no-data {
        text-align: center;
    }

    .total-pay-count {
        font-size: 24px;
        color: #ff5000;
    }

    @media (max-width: 700px) {
        /* 弹窗 */
        .el-message-box {
            width: 300px !important;
        }

        /* el-input-number样式 */
        .el-input-number {
            width: 100px !important;
            line-height: 28px !important;
        }

        .el-input-number .el-input__inner {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        .el-input__inner {
            height: 30px !important;
        }

        .el-input-number__decrease,
        .el-input-number__increase {
            width: 20px !important;
        }
    }
</style>
